<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" >
    <title>Title</title>
</head>
<body>
<table>
    <tr>
        <td>登录名：</td>
    <td style="text-align: center"> <input type="text" name="username" id="username" /></td>
</tr><br>
    <tr>
        <td>密码：</td>
        <td style="text-align: center"> <input type="text" name="password" id="password" /></td>
    </tr>
    <tr>
      <td style="text-align: center"> <input type="button" value="登录" onclick="login()" /></td>
    </tr>
</table>
<input type="button" value="testLocalStorage" onclick="testLocalStorage()"/>
<script type="text/javascript" th:src="jquery.min.js"></script>
<script type="text/javascript">
function login() {
    var username=$("#username").val();
    var password=$("#password").val();
    var param="username="+username+"&password="+password;
    $.ajax({
       url:"/login",
       data:param,
        success:function (data) {
           if(data.code==200){
               var token=data.token;
               var localStorage=window.localStorage;//浏览器提供的存储空间
               //web storage 中的数据查看，在浏览器开发者面板中的application中查看
               //local storage 本地存储的数据，长期有效
               //session storage 回话存储数据，一次回话有效
               localStorage.token=token;//通过key,value存储数据
               alert(data.msg)
           }else{
               alert(data.msg)
           }
        }
    });

}

function setHeader(xhr) {
xhr.setRequestHeader("Authorization",localStorage.token);    
}

function testLocalStorage() {
    $.ajax({
        url: "/testAll",
        success: function (data) {
            if(data.code==200){
                //重置token
                window.localStorage.token=data.token;
                alert(data.msg);
            }else{
                alert(data.msg)
            }
        },
        //用请求头传送数据
        beforeSend: setHeader
    });
}




</script>

</body>
</html>